<template>
  <!-- 底部导航栏 -->
  <div class="footer-bar">
    <div class="footer-container">
      <!-- 底部头部主题内容 -->
      <div class="footer-top">
        <!-- 服务列表 -->
        <div class="top-left">
          <ul>
            <li class="ft-list">
              <ul>
                <li>产品服务</li>
                <li><a href="">产品介绍</a></li>
                <li><a href="">增值服务</a></li>
                <li><a href="">生鲜速递</a></li>
              </ul>
            </li>
            <li class="ft-list">
              <ul>
                <li>客户服务</li>
                <li><a href="">下单寄件</a></li>
                <li><a href="">运单追踪</a></li>
                <li><a href="">取货定位</a></li>
                <li><a href="">网点查询</a></li>
                <li><a href="">时效查询</a></li>
              </ul>
            </li>
            <li class="ft-list">
              <ul>
                <li>热门活动</li>
                <li><a href="">积分攻略</a></li>
                <li><a href="">预存运费</a></li>
                <li><a href="">客户介绍</a></li>
                <li><a href="">总裁信箱</a></li>
                <li><a href="">跨越领鲜</a></li>
              </ul>
            </li>
            <li class="ft-list">
              <ul>
                <li>新闻公告</li>
                <li><a href="">最新动态</a></li>
                <li><a href="">跨越公告</a></li>
                <li><a href="">跨越新闻</a></li>
                <li><a href="">跨越公益</a></li>
              </ul>
            </li>
            <li class="ft-list">
              <ul>
                <li>走进跨越</li>
                <li><a href="">企业介绍</a></li>
                <li><a href="">联系我们</a></li>
                <li><a href="">开放平台</a></li>
                <li><a href="">跨越小程序</a></li>
              </ul>
            </li>
            <li class="ft-list">
              <ul>
                <li>内部办公</li>
                <li><a href="">企业邮箱</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- 联系方式 -->
        <div class="top-right">
          <div class="right-time">24小时在线客服热线</div>
          <div class="right-tel">95324</div>
          <div class="right-us">关注我们</div>
          <div class="right-connect">
            <ul>
              <li class="connect-li">
                <div class="connect-code">
                  <img
                    class="code-img"
                    src="@/assets/img/index/footer/code-wechat.png"
                    alt="跨越速运公众号"
                  />
                </div>
                <img
                  class="icon-item"
                  src="@/assets/img/index/footer/WeChat.png"
                />
              </li>
              <li class="connect-li">
                <div class="connect-code">
                  <img
                    class="code-img"
                    src="@/assets/img/index/footer/code-wb.png"
                    alt="跨越速运微博"
                  />
                </div>
                <img
                  class="icon-item"
                  src="@/assets/img/index/footer/micro-blog.png"
                />
              </li>
              <li class="connect-li">
                <div class="connect-code">
                  <img
                    class="code-img"
                    src="@/assets/img/index/footer/code-app.png"
                    alt="跨越速运app"
                  />
                </div>
                <img
                  class="icon-item"
                  src="@/assets/img/index/footer/phone.png"
                />
              </li>
              <li class="connect-li">
                <div class="connect-code">
                  <img
                    class="code-img"
                    src="@/assets/img/index/footer/code-mini-program.png"
                    alt="跨越公众号"
                  />
                </div>
                <img
                  class="icon-item"
                  src="@/assets/img/index/footer/mini-program-icon.png"
                />
              </li>
              <li class="connect-li">
                <div class="connect-code">
                  <img
                    class="code-img"
                    src="@/assets/img/index/footer/code-kylx.png"
                    alt="跨越领鲜"
                  />
                </div>
                <img
                  class="icon-item"
                  src="@/assets/img/index/footer/kylx-icon.png"
                />
              </li>
              <li class="connect-li">
                <div class="connect-code">
                  <img
                    class="code-img"
                    src="@/assets/img/index/footer/code-khjs.png"
                    alt="客户介绍"
                  />
                </div>
                <img
                  class="icon-item"
                  src="@/assets/img/index/footer/gw-icon.png"
                />
              </li>
              <li class="connect-li">
                <div class="connect-code long-img">
                  <img
                    class="code-img"
                    src="@/assets/img/index/footer/web.png"
                    alt="跨越速运客户端网页版"
                  />
                </div>
                <a href="">
                  <img
                    class="icon-item"
                    src="@/assets/img/index/footer/khdwyb-icon.png"
                  />
                </a>
              </li>
              <li class="connect-li">
                <div class="connect-code long-img">
                  <img
                    class="code-img"
                    src="@/assets/img/index/footer/download-local.png"
                    alt="跨越速运客户端本地包"
                  />
                </div>
                <a href="">
                  <img
                    class="icon-item"
                    src="@/assets/img/index/footer/khdbdb-icon.png"
                  />
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 底部介绍 -->
      <div class="footer-bottom">
        <div class="bottom-label">
          <a href="">用户协议</a>
          <a href="">隐私政策</a>
          <a href="">电子运单契约条款</a>
          <a href="">不承保托寄物目录</a>
          <a href="">禁运物品清单</a>
        </div>
        <div class="footer-copyright">
          <span class="footer-address"
            >总部地址：广东省深圳市宝安区宝安国际机场航站四路跨越速运集团总部大厦</span
          >跨越速运集团有限公司版权所有 Copyright © 2007-2019 ky-express.com.All
          Rights Reserved <a href="">粤ICP备08000894号</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
// 底部栏
.footer-bar {
  width: 100%;
  padding-bottom: 70px;
  overflow: hidden;
  background-color: #3a3249;
  > .footer-container {
    width: var(--container-width);
    margin: 0 auto;
    // 底部头部主题内容
    > .footer-top {
      margin-top: 73px;
      padding-bottom: 46px;
      font-size: 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      // 底部导航
      > .top-left {
        > ul {
          display: flex;
          > .ft-list {
            vertical-align: top;
            width: 130px;
            > ul {
              > li {
                font-size: 15px;
                margin-bottom: 10px;
                color: #aaa;
                > a {
                  color: #aaa;
                  &:hover {
                    color: #fff;
                  }
                }
                &:first-child {
                  margin-bottom: 26px;
                  font-size: 20px;
                  color: #fff;
                }
              }
            }
          }
        }
      }
      // 联系方式
      > .top-right {
        width: 200px;
        margin-left: 200px;
        > .right-time {
          font-size: 20px;
          color: #fff;
        }
        > .right-tel {
          margin-bottom: 39px;
          font-size: 54px;
          line-height: 71px;
          color: #ffffff;
        }
        > .right-us {
          margin-bottom: 11px;
          font-size: 20px;
          color: #ffffff;
        }
        // 小图标
        > .right-connect {
          > ul {
            display: flex;
            flex-wrap: wrap;
            > .connect-li {
              position: relative;
              width: 32px;
              height: 32px;
              line-height: 32px;
              margin-right: 10px;
              margin-bottom: 8px;
              background: rgba(255, 255, 255, 0.2);
              border-radius: 50%;
              text-align: center;
              &:hover {
                background: rgba(255, 255, 255, 0.5);
                > .connect-code {
                  display: block;
                }
              }
              .icon-item {
                width: 70%;
                height: 70%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
              // 悬浮图标样式
              > .connect-code {
                display: none;
                transition: all linear 0.3s;
                position: absolute;
                top: -200px;
                left: -64px;
                > img {
                  width: 160px;
                  height: 196px;
                }
              }
              > .long-img {
                top: -46px;
                > img {
                  width: 160px;
                  height: 44px;
                }
              }
            }
          }
        }
      }
    }
    // 底部介绍
    > .footer-bottom {
      font-size: 12px;
      > .bottom-label {
        margin-top: 40px;
        > a {
          display: inline-block;
          padding: 0 14px;
          position: relative;
          color: rgba(255, 255, 255, 0.3);
          &::before {
            content: '';
            width: 1px;
            height: 11px;
            background-color: rgba(255, 255, 255, 0.3);
            position: absolute;
            right: 0;
            top: 2px;
          }
        }
        > :first-child {
          padding-left: 0;
        }
        > :last-child {
          &::before {
            width: 0;
            border-right: none;
          }
        }
      }
      > .footer-copyright {
        color: rgba(255, 255, 255, 0.3);
        padding-top: 30px;
        > span {
          color: rgba(255, 255, 255, 0.3);
          float: right;
        }
        > a {
          text-decoration: underline;
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }
}
</style>
